<template>
  <!-- 成员管理 -->
  <div class="page_vue" v-loading="pageLoading">
    <navigation-title>
      <div class="create_box">
        <el-button type="primary" @click="openRoleListClick()" :disabled="isCreatePeopleBtn">
          <el-icon>
            <User />
          </el-icon>
          <span class="create_text">{{ $t("teamDoc.people.setDefRole") }}</span>
        </el-button>
        <el-button type="primary" @click="openCreateClick()" :disabled="isCreatePeopleBtn" :icon="Plus">
          <span class="create_text">{{ $t("teamDoc.people.manageMembers") }}</span>
        </el-button>
      </div>
    </navigation-title>
    <search-input :placeholder="$t('teamDoc.people.searchName')" @inputEnter="searchInputEnter">
      <!-- 角色 -->
      <div class="sel">
        <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" virtual-triggering>
          <el-checkbox-group v-model="memberCheckList" @change="memberCheckChange" v-loading="roleLoading">
            <el-checkbox :label="item.id" :value="item.id" v-for="(item, index) in peopleRoleList" :key="index" style="display:block;">
              <svg-icon icon-class="role2" :style="{ color: item.iconColor ? item.iconColor : '#000000' }" />
              {{ item.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-popover>
        <div class="sort_box" ref="buttonRef">
          <span>{{ $t("teamDoc.people.role") }}</span>
          <el-icon>
            <ArrowDown />
          </el-icon>
        </div>
      </div>
      <!-- 类型 -->
      <div class="sel">
        <el-popover ref="popoverRef" :virtual-ref="buttonRef1" trigger="click" virtual-triggering>
          <el-checkbox-group v-model="checkType" @change="typeCheckChange" v-loading="roleLoading">
            <el-checkbox v-for="(item, index) in checkTypeArr" :label="item.value" :value="item.value" :key="index"
              style="display:block;">{{ item.name
              }}</el-checkbox>
          </el-checkbox-group>
        </el-popover>
        <div class="sort_box" ref="buttonRef1">
          <span>{{ $t("teamDoc.people.dimensionality") }}</span>
          <el-icon>
            <ArrowDown />
          </el-icon>
        </div>
      </div>
      <div class="total_people">{{ requestStr.total }}{{ $t("teamDoc.people.memberNum") }}</div>
    </search-input>
    <div class="table_box">
      <el-table :data="TableData" class="tableClass" ref="multipleTable" tooltip-effect="dark" style="width: 100%">
        <el-table-column :label="$t('teamDoc.people.name')">
          <template #default="scope">

            <div class="table_NameBox">

              <!-- <img v-if="scope.row.objectType == '3'" style="background: #3662EC;" src="@/assets/images/jues.png"
                alt="" />
              <img v-if="scope.row.objectType == '2'" style="background: #FE4D4F;" src="@/assets/images/gwei.png"
                alt="" />
              <img v-if="scope.row.objectType == '1'" style="background: #07b9b9;" src="@/assets/images/bumeng.png"
                alt="" /> -->
              <div v-if="scope.row.objectType == '0'" class="avatar">
                <div>{{ scope.row.objectName.slice(0, 1) }}</div>
              </div>
              <div class="table_Name">
                <p>{{ scope.row.objectName }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('teamDoc.people.role')">
          <template #default="scope">
            {{ scope.row.roleName }}
          </template>
        </el-table-column>
        <el-table-column prop="objectTypeText" :label="$t('teamDoc.people.dimensionality')">
          <template #default="scope">
            <div>{{ scope.row.objectTypeText }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('teamDoc.people.joinDate')"></el-table-column>
      </el-table>

      <div style="margin-top: 5px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="requestStr.page" :page-sizes="[10, 20, 30, 40]" :page-size="requestStr.size"
          layout="total,  prev, pager, next,sizes" :total="requestStr.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="选择成员" width="550" :before-close="handleClose">
      <team-new-user ref="SelectMemberNewTeamRefs" :pageType="'teamPeople'"
        @onRefresh="selectMemberNewTeam_closeClick"></team-new-user>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
          <el-button type="primary" @click="closeUserDia">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
    <select-role-list-team ref="selectRoleTeamRefs" :pageType="'teamPeople'"
      @RowClick="selectRoleTeamRowClick"></select-role-list-team>
  </div>
</template>

<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import navigationTitle from './components/navigation-title.vue'
import searchInput from '@/views/components/newUiModule/search-input.vue'
import { apiTeamMemberQuery, apiTeamGetInformation, apiTeamSetDefaultRole } from '@/api/teamKnowdge/teamDocApi'
import { apiTeamRoleQuery } from '@/api/teamKnowdge/teamRoleApi'
import { useTeamRoleStore } from '@/store/modules/teamRole'
import TeamNewUser from "@/views/teamKnowdge/power/index.vue"
import selectRoleListTeam from './power/select-role-list-team.vue'
const { proxy } = getCurrentInstance() as any
const pageLoading = ref(false)
const teamRoleStore = useTeamRoleStore()
const memberCheckList = ref([])
const roleLoading = ref(false)
const route = useRoute()
const teamId = ref(null)
const peopleRoleList = ref([])
const deptCheckList = ref([])
const checkType = ref([])
const inputString = ref('')
const SelectMemberNewTeamRefs = ref(null)
const dialogVisible = ref(false)
const defaultId = ref(null)
const checkTypeArr = ref([{
  name: '用户',
  value: '0'
}, {
  name: '部门',
  value: '1'
}, {
  name: '角色',
  value: '2'
}, {
  name: '岗位',
  value: '3'
}])
const TableData = ref([])
const buttonRef = ref(null)
const buttonRef1 = ref(null)
const selectRoleTeamRefs = ref(null)
const requestStr = reactive({
  page: 1,
  size: 10,
  total: 0,
})

const isCreatePeopleBtn = computed(() => {
  // console.log('teamRoleStore.myRoleList', teamRoleStore.myRoleList)
  return !proxy.$yuUtils.documentsPermissionFunc(["jurisdiction"], teamRoleStore.myRoleList)
})
onMounted(() => {
  teamId.value = route.query.teamId
  getApiTeamMemberQuery()
  getRoleList()
  getRoleListDefault()
})

const closeUserDia = () => {
  dialogVisible.value = false
  getApiTeamMemberQuery()
}

const getApiTeamMemberQuery = async () => {
  pageLoading.value = true
  let params: {
    page: number,
    size: number,
    sort: string,
    teamId: any,
    roleId: any[],
    objectType: string,
    NickName?: string
  } = {
    page: requestStr.page - 1,
    size: requestStr.size,
    sort: "id,asc",
    teamId: teamId.value,
    roleId: memberCheckList.value,
    objectType: checkType.value.join(',')
  }
  if (inputString.value) {
    params.NickName = inputString.value
  }
  const res = await apiTeamMemberQuery(params)
  if (res.code == 200) {
    pageLoading.value = false
    requestStr.total = res.data.total
    TableData.value = res.data.rows.map(item => {
      let objectTypeText
      switch (item.objectType) {
        case 0:
          objectTypeText = "用户"
          break
        case 1:
          objectTypeText = "部门"
          break
        case 2:
          objectTypeText = "岗位"
          break
        case 3:
          objectTypeText = "角色"
          break
        default:
          objectTypeText = "未知"
      }
      item.objectTypeText = objectTypeText
      return item
    })
  }
}
const memberCheckChange = () => {
  requestStr.page = 1
  getApiTeamMemberQuery()
}
const typeCheckChange = () => {
  requestStr.page = 1
  getApiTeamMemberQuery()
}
const openCreateClick = () => {
  dialogVisible.value = true
  nextTick(() => {
    SelectMemberNewTeamRefs.value.getTableData(teamId.value)
  })
}
const handleClose = () => {
  dialogVisible.value = false
}
// 获取默认角色
const getRoleListDefault = async () => {
  let res = await apiTeamGetInformation({
    id: teamId.value
  })
  if (res.code == 200) {
    defaultId.value = res.data.defaultRole
    // this.$EventBus.$emit("defaultRole", this.defaultId);
  }
}
const getRoleList = () => {
  apiTeamRoleQuery({
    teamId: teamId.value,
    page: 0,
    size: 9999
  })
    .then((res) => {
      peopleRoleList.value = res.data.rows
      // this.$EventBus.$emit("roleList", this.peopleRoleList);
    })
    .catch((err) => {

    })
}
const openRoleListClick = async () => {
  const res = await apiTeamGetInformation({
    id: teamId.value
  })
  if (res.code == 200) {
    let row = {
      roleId: res.data.defaultRole
    }
    selectRoleTeamRefs.value.getTableData(row)
  }

}
const selectRoleTeamRowClick = (row, val) => {
  apiTeamSetDefaultRole({
    id: teamId.value,
    defaultRole: row.id
  })
    .then((res) => {
      ElMessage.success("设置成功")
      getRoleListDefault()
      // if (this.$refs.SelectMemberNewTeamRefs)
      // {
      //   this.$refs.SelectMemberNewTeamRefs.updateRole(row.id);
      // }
    })
}
const selectMemberNewTeam_closeClick = () => {

}


const searchInputEnter = () => {

}
const querySearchLoad = () => {

}


const handleSizeChange = () => {

}
const handleCurrentChange = () => {
}

</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
}

.page_vue {
  height: calc(100vh - 50px);
}

.create_box {
  :deep(.el-button--primary) {
    background-color: #6698ff;
    border-color: #6698ff;
  }

  .el-button--primary.is-disabled {
    color: #fff;
    background-color: #94b7fd;
    border-color: #94b7fd;

    &:hover {
      box-shadow: none;
    }
  }

  :deep(.el-button--primary:focus) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }

  :deep(.el-button--primary:hover) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }
}

.sort_box {
  color: #999;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
  padding: 8px;
  transition: all 0.2s ease;

  span {
    color: #666;
    font-size: 14px;
    margin-left: 5px;
  }

  &:hover {
    color: #6698ff !important;
    background: rgba(102, 152, 255, 0.1);

    span {
      color: #6698ff !important;
    }
  }
}

.people_box {
  max-height: 200px;
  overflow: auto;

  :deep(.el-checkbox) {
    padding: 5px 0;
    font-size: 15px;
  }

  :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
    color: #6698ff;
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #6698ff;
    border-color: #6698ff;
  }

  :deep(.el-checkbox__inner:hover) {
    border-color: #6698ff;
  }
}

.deptBox {
  width: 100%;
  max-height: 400px;
  overflow: auto;
}

.total_people {
  font-size: 14px;
  color: #333;
  margin-left: 10px;
}

.table_box {
  margin-left: 20px;

  .tableClass {
    border-color: rgba(0, 0, 0, 0);
  }

}

.table_NameBox {
  display: flex;
  align-items: center;

  .avatar {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #56abfb;
    margin-right: 4px;

    div {
      margin-top: 2px;
      margin-left: 1px;
      // transform: scale(0.9, 0.9);
    }
  }

  img {
    padding: 2px;
    width: 22px;
    height: 22px;
    margin-right: 5px;
    border-radius: 15px;
  }

  .table_Name {
    margin-left: 5px;

    p {
      margin: 0;
    }

    span {
      color: #999;
    }

    .table_Name_span {
      color: black;
    }

    .table_Name_syz {
      border: 1px solid #83acff;
      padding: 4px 5px;
      border-radius: 5px;
      margin-left: 5px;
      color: #83acff;
    }
  }
}
</style>
